<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/newTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    
    <ui:define name="content">
        <h:form >
            <p:growl id="growl" showDetail="true" sticky="false" life="3000"/> 
            <p:panel header="#{gestorPrincipal.cabeceraArticulo}" style="padding: 10px 10px 10px 10px">
                <p:outputPanel style="padding-top: 15px">
                    <h:outputText value="#{gestorPrincipal.foroseleccionado.nombre}" style="width: 100%;text-align: left; font-weight: bold; font-size: 28px"/>
                    <br></br>
                    <br></br>
                    <p:graphicImage value="#{gestorPrincipal.getImagen(gestorPrincipal.foroseleccionado)}" style="width: 400px; height: 320px" rendered="#{gestorPrincipal.foroseleccionado.imagen!=null}"/>
                    <br></br>
                    <br></br>
                    <h:outputText value="#{gestorPrincipal.foroseleccionado.descripcion}" style="width: 100%" escape="false"/>
                </p:outputPanel>

            </p:panel>
            <p:panel header="Comentarios" style="padding: 10px 10px 10px 10px">
                <h:panelGrid columns="1" style="width: 100%" cellpadding="5">
                <p:dataGrid value="#{gestorPrincipal.obtenerComentarios()}" var="comentario"
                            rows="10" paginator="true"  columns="1" 
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                    
                    <p:fieldset legend="#{gestorPrincipal.headerComentario(comentario)}">  
                        <h:panelGrid columns="1" style="width: 100%">  
                            <h:outputText  value="#{comentario.contenido}"/>
                            <p:spacer width="100" height="15" />
                            <p:separator style="height: 3px"/>
                            <p:commandLink value="Reportar" style="font-size: 10px" action="#{gestorPrincipal.denunciarComentario()}" ajax="false">    
                                <f:setPropertyActionListener value="#{comentario}"   
                                        target="#{gestorPrincipal.selectedComentario}" />  
                            </p:commandLink> 
                        </h:panelGrid>  
                    </p:fieldset> 
                </p:dataGrid>
                <p:commandButton value="Nuevo Comentario" action="#{gestorPrincipal.nuevoComentario()}" ajax="false" style="float: left"/>    
                </h:panelGrid>
                <p:dialog header="Alerta" resizable="false" showEffect="explode" hideEffect="explode" modal="true" visible="#{gestorPrincipal.sinLoggin}" >  
                    <h:outputText value="Debe estar loggeado para poder dejar comentarios." />  
                    <br></br>
                    <br></br>
                    <p:commandButton value="Aceptar" action="#{gestorPrincipal.setSinLoggin(false)}" ajax="false" style="float: right"/>
                </p:dialog> 
                <p:dialog header="Comentario" resizable="false" closable="false" showEffect="explode" hideEffect="explode" modal="true" visible="#{gestorPrincipal.mostrarComentarioNuevo}" >  
                    <h:outputText value="Escriba aquí su comentario:" />  
                    <br></br>
                    <br></br>
                    <p:inputTextarea rows="8" cols="28" value="#{gestorPrincipal.textoComentario}"/>
                    <br></br>
                    <br></br>
                    
                    <p:commandButton value="Cancelar" action="#{gestorPrincipal.setMostrarComentarioNuevo(false)}" ajax="false" style="float: right"/>
                    <p:commandButton value="Aceptar" action="#{gestorPrincipal.guardarComentario()}" ajax="false" style="float: right"/>
                </p:dialog> 
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>